<script lang='ts' setup name='App'>
import { ref } from "vue";
import Person from "@/components/Person.vue";

import type {UserInter} from '@/types/index'

let  name = ref('张飞')
let  age = ref(18)
let  address = ref('河北')


let user1 = ref<UserInter>({
            name: "刘备",
            age: 50,
            address: "荆州"
})

let user2 = ref<UserInter>({
            name: "曹操",
            age: 58,
            address: "沛县",
            max:500,
            abc:100,
            def:200,
            qqq:300
})

</script>

<template>
      <div class="parent">

            <Person :name="name" :age="age" :address="address"></Person>
           
            <Person :name="user1.name" :age="user1.age" :address="user1.address"></Person>
            
            <Person  v-bind="user2"></Person>

      </div>


</template>

<style scoped>
      .parent{
            border: solid 1px gray;
            padding: 10px;
            background-color: antiquewhite;
      }

</style>